<template>
    <div class="reportFormPage" v-if="show">
        <div class="report-dom">
            <el-row>
                <el-col :span="5" :offset="19">
                    <div class="pageNumBox">
                        <span>第</span>
                        <span class="placeholder-min text-center">&nbsp;{{ form.page }}&nbsp;</span>
                        <span>页，共</span>
                        <span class="placeholder-min text-center">&nbsp;{{ form.totalPage }}&nbsp;</span>
                        <span>页</span>
                    </div>
                </el-col>
            </el-row>
            <div class="topTwoBox">
                <div class="centerName">{{ form.baobmc }}</div>
                <div class="codeText">{{ form.baobbh }}</div>
            </div>
            <div class="threeTopBox">
                <div class="left-border">
                    <div class="box-title">检测单位名称：</div>
                    <div class>
                        {{
                        form.jiancdwmc
                        }}
                    </div>
                </div>
                <div class="right-border">
                    <span>报告编号：</span>
                    <span class="placeholder">{{ form.baogbh }}</span>
                </div>
            </div>
            <!-- 表格主要内容区 -->
            <div class="table-border">
                <table height="220px" class="top-table">
                    <tbody>
                    <tr>
                        <td height="30" align="center" width="15%">
                            <span style="width: 90px; display: inline-block">工程名称</span>
                        </td>
                        <td width="35%" class="text-center">
                            <span>{{ form.gongcmc }}</span>
                        </td>
                        <td align="center" width="15%">
                            <span style="width: 90px; display: inline-block">工程部位/用途</span>
                        </td>
                        <td width="35%" class="text-center">
                            <span>{{ form.gongcbwyt }}</span>
                        </td>
                    </tr>
                    <tr>
                        <td height="50" align="center">样品信息</td>
                        <td class="specimen-border" colspan="3">
                            <span>样品名称：</span>
                            <span :class="{ 'placeholder': !form.yangpmc }">{{ form.yangpmc }}</span>
                            <span>；样品编号：</span>
                            <span :class="{ 'placeholder-long': !form.yangpbh }">{{ form.yangpbh }}</span>
                            <span>；样品数量：</span>
                            <span :class="{ 'placeholder': !form.yangpsl }">{{ form.yangpsl }}</span>
                            <span>；样品状态：</span>
                            <span :class="{ 'placeholder': !form.yangpzt }">{{ form.yangpzt }}</span>
                            <span>；来样时间：</span>
                            <span :class="{ 'placeholder': !form.yangpsj }">{{ form.yangpsj }}</span>
                        </td>
                    </tr>

                    <tr>
                        <td height="25" align="center" width="15%">
                            <span style="width: 90px; display: inline-block">试验检测日期</span>
                        </td>
                         <!-- <td width="35%" class="text-center">{{ form.shiyjcrq }}</td> -->                                            
 <td width="35%" class="text-center">
      <el-input v-model="form.shiyjcrq" />
</td>
                        <td align="center" width="15%">
                            <span style="width: 90px; display: inline-block">试验条件</span>
                        </td>
                        <td v-if="isPdf" width="35%">
                            温度：
                            <span style="display: inline-block; width: 10%;">{{ form.shiytjwd }}</span>
                            ℃；湿度：
                            <span style="display: inline-block; width: 10%;">{{ form.shiytjsd }}</span>%RH
                        </td>
                        <td v-else width="35%">
                            温度：
                            <el-input :type="isPdf ? 'string' : 'number'" v-model="form.shiytjwd" style="width: 15%"/>
                            ℃；湿度：
                            <el-input :type="isPdf ? 'string' : 'number'" v-model="form.shiytjsd" style="width: 15%"/>
                            %RH
                        </td>
                    </tr>

                    <tr>
                        <td height="50" align="center" width="15%">
                            <span style="width: 90px; display: inline-block">检测依据</span>
                        </td>
                        <td width="35%">
                            <span v-if="isPdf">{{ form.jiancyj }}</span>
                            <el-input v-else type="textarea" v-model="form.jiancyj" :rows="2" class="mark"
                                      @dblclick.native="showBsJiancyjView" readonly/>
                        </td>
                        <td align="center" width="15%">
                            <span style="width: 90px; display: inline-block">判定依据</span>
                        </td>
                        <td width="35%">
                            <span v-if="isPdf">{{ form.pandyj }}</span>
                            <el-input v-else type="textarea" v-model="form.pandyj" :rows="2"
                                      @dblclick.native="showBsJudgeBaseView"
                                      @focus="handleFocus('pandyj')" class="mark"/>
                        </td>
                    </tr>
                    <tr class="bottom-border">
                        <td height="50" align="center">
                            <div>主要仪器设备</div>
                            <div>名称及编号</div>
                        </td>
                        <td colspan="3">
                            <span v-if="isPdf">{{ form.zhuyyqsbmcjbh }}</span>
                            <el-input v-else type="textarea" :rows="2" v-model="form.zhuyyqsbmcjbh"
                                      class="height100 width100 mark"
                                      @dblclick.native="showBsInstrumentView" readonly></el-input>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!-- 取样地点-代表数量 -->
                <table height="30px" class="middle-table">
                    <tbody>
                    <tr>
                        <td height="30" align="center" width="15%">取样地点</td>
                        <td width="35%">
                            <span>{{ this.form.quydd }}</span>
                        </td>
                        <td height="30" align="center" width="15%">代表数量</td>
                        <td width="35%">
                            <span>{{ this.form.daibsl }}</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!-- 单轴抗压强度试验 -->
                <table height="60px" class="middle-table">
                    <tbody>
                    <tr>
                        <td align="center" height="30" colspan="6">单轴抗压强度试验</td>
                    </tr>
                    <tr>
                        <td class="text-center" style="width: 15%;" height="30">
                            <span style="width:90px;display:inline-block">试样用途</span>
                        </td>
                        <td class="text-center" style="width: 20%;">
                            <span class="textarea-span">{{ form.shiyyt }}</span>
                        </td>
                        <td class="text-center" style="width: 17%;">
                            <span style="width:90px;display:inline-block">岩石层理描述</span>
                        </td>
                        <td class="text-center" style="width: 15%;">
                            <span class="textarea-span">{{ form.yansclms }}</span>
                        </td>
                        <td class="text-center" style="width: 13%;">
                            <span style="width:90px;display:inline-block">试件形状</span>
                        </td>
                        <td class="text-center" style="width: 20%;">
                            <span class="textarea-span">{{ form.shijxz }}</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!-- 主数据 -->
                <table height="400px" class="middle-table">
                    <tbody>
                    <tr>
                        <td class="text-center" style="width: 25%;" height="30" colspan="2">
                            <span style="width:90px;display:inline-block">检测项目</span>
                        </td>
                        <td class="text-center" style="width: 15%;">
                            <span style="width:90px;display:inline-block">技术指标</span>
                        </td>
                        <td class="text-center" style="width: 20%;">
                            <span style="width:90px;display:inline-block">检测结果</span>
                        </td>
                        <td class="text-center" style="width: 40%;">
                            <span style="width:90px;display:inline-block">结果判定</span>
                        </td>
                    </tr>

                    <template v-for="(item, index) in form.baDetailVos">
                        <tr>
                            <td style="width: 15%;" rowspan="12" v-if="index===0">抗压强度(MPa)</td>
                            <td class="text-center" style="width: 10%;" rowspan="2" v-if="index%2===0">
                                <span class="textarea-span">{{ (index / 2 + 1)}}组</span>
                            </td>
                            <td class="text-center" style="width: 15%;" height="30">
                                <el-input v-model="item.jiszb" class="mark"
                                          @dblclick.native="showBsJudgeBaseEditView(index)" readonly/>
                            </td>
                            <td class="text-center" style="width: 20%;">
                                <span class="textarea-span">{{ item.jiancjg }}</span>
                            </td>
                            <td class="text-center" style="width: 40%;">
                                <span class="textarea-span">{{ item.jiegpd }}</span>
                            </td>
                        </tr>
                    </template>
                    </tbody>
                </table>
                <!-- 检测结论和附加说明 -->
                <table height="120px" class="bottom-table">
                    <tr>
                        <td style="border-bottom-width: 1px;">
                            <span v-if="isPdf" class="textarea-span">{{ form.jiancjl }}</span>
                            <el-input v-else type="textarea" :rows="2" v-model="form.jiancjl"
                                      @focus="handleFocus('jiancjl')"
                                      @dblclick.native="getJcjl()"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span v-if="isPdf" class="textarea-span">{{ form.fujsm }}</span>
                            <el-input v-else type="textarea" :rows="2" v-model="form.fujsm"
                                      @focus="handleFocus('fujsm')"/>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- 表格底部签名区域 -->
            <table height="22px" class="transparent">
                <tbody>
                <tr>
                    <td width="10%" align="right">检测：</td>
                    <td width="15%" align="left">
                        <!-- {{this.form.jiancr}} -->
                    </td>
                    <td width="10%" align="right">审核：</td>
                    <td width="15%" align="left">
                        <!-- {{this.form.jilr}} -->
                    </td>
                    <td width="10%" align="right">批准:</td>
                    <td align="left" width="15%">
                        <!-- {{this.form.fuhr}} -->
                    </td>
                    <td width="10%">日期：</td>
                    <td align="left" width="15%">
                        <div style="display: inline-block; margin-right: 30px;">年</div>
                        <div style="display: inline-block; margin-right: 30px;">月</div>
                        <div style="display: inline-block;">日</div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <bs-instrument-view ref="bsInstrumentViewRef" @select="selectInstrument"></bs-instrument-view>
        <bs-jiancyj-view ref="bsJiancyjViewRef" @select="selectJiancyj" :syType="syType"></bs-jiancyj-view>
        <bs-judge-base-view ref="bsJudgeBaseViewRef" @select="selectJudge" :syType="syType"></bs-judge-base-view>
        <bs-judge-base-edit-view ref="bsJudgeBaseEditViewRef" @submit="selectJudgeBaseEdit"
                                 :syType="syType"></bs-judge-base-edit-view>
    </div>
</template>

<script>
import BsJiancyjView from "@/views/sycs/bsJiancyj/BsJiancyjView.vue";
import BsInstrumentView from "@/views/dept/bsInstrument/BsInstrumentView.vue";
import BsJudgeBaseEditView from "@/views/sycs/bsJudgeBase/BsJudgeBaseEditView.vue";
import TableLineLogMoreChart from "@/views/reportForms/components/TableLineLogMoreChart.vue";
import BsJudgeBaseView from "@/views/sycs/bsJudgeBase/BsJudgeBaseView.vue";
import {handleFocus, uniqueStr} from "@/views/reportForms/utils";
import {computeBiQualification} from "@/api/sycs/biQualification";
import Bus from "@/utils/bus";
import {
    addYsDzkyqdsybgBsInfo,
    getYsDzkyqdsybgBsInfo,
    updateYsDzkyqdsybgBsInfo
} from "@/api/reportys/ysYsdzkyqdsyjcbgBsInfo";

export default {
    name: "dzkyqdsybg",
    components: {BsJudgeBaseView, TableLineLogMoreChart, BsJudgeBaseEditView, BsInstrumentView, BsJiancyjView},
    props: {
        excelId: {
            type: [String, Number],
            default: () => ""
        },
        syType: {
            type: [String, Number],
            default: () => ""
        },
        obtainForm: {
            type: [Object],
            default: () => {
            }
        },
        page: {
            type: Number,
            default: () => 0
        },
        isPdf: {
            type: Boolean,
            default: () => false
        },
        printEmpty: {
            type: Boolean,
            default: () => false
        }
    },
    data() {
        return {
            show: true,
            form: {
                excelId: undefined,
                totalPage: undefined,
                page: undefined,
                baogbh: undefined,
                jiancdwmc: undefined,
                gongcbwyt: undefined,
                yangpmc: undefined,
                yangpbh: undefined,
                yangpsl: undefined,
                yangpzt: undefined,
                yangpsj: undefined,
                jiancrq: undefined,
                shiytjwd: undefined,
                shiytjsd: undefined,
                jiancyj: undefined,
                pandyj: undefined,
                zhuyyqsbmcjbh: undefined,
                quywz: undefined,
                weitrwbh: undefined,
                tuycd: undefined,
                daibsl: undefined,
                fujsm: undefined,
                jiancjl: undefined,
                shigwtdw: undefined,
                gongcmc: undefined,
                shebIds: [],
                jiancyjIds: [],
                pandyjIds: [],
                shiyyt: undefined,
                yansclms: undefined,
                shijxz: undefined,
                baDetailVos: []
            },
        }
    },
    created() {
        this.init();
    },
    mounted() {
        // 主要设备
        Bus.$on("setYsJcBgZhuyyqsbmcjbh", (data) => {
            const {zhuyyqsbmcjbh, shebIds} = data;
            const str = zhuyyqsbmcjbh + (this.form.zhuyyqsbmcjbh ? "、" + this.form.zhuyyqsbmcjbh : "");
            const ids = shebIds + (this.form.shebIds ? "," + this.form.shebIds : "");
            this.form.zhuyyqsbmcjbh = uniqueStr(str, "、");
            this.form.shebIds = uniqueStr(ids, ",");
        });
        // 检测依据
        Bus.$on("setYsJcBgJiancyj", (data) => {
            const {jiancyj, jiancyjIds} = data;
            const str = jiancyj + (this.form.jiancyj ? "、" + this.form.jiancyj : "");
            const ids = jiancyjIds + (this.form.jiancyjIds ? "," + this.form.jiancyjIds : "");
            this.form.jiancyj = uniqueStr(str, "、");
            this.form.jiancyjIds = uniqueStr(ids, ",");
        });
        // 基础带回信息赋值
        Bus.$on("setYsBgBase", (data) => {
            if (data) {
                this.form.shiytjwd = data.shiytjwd || undefined
                this.form.shiytjsd = data.shiytjsd || undefined
                this.form.shiyyt = data.shiyyt || undefined
                this.form.yansclms = data.yansclms || undefined
                this.form.shijxz = data.shijxz || undefined
            }
        });
        // 平均抗压强度赋值
        Bus.$on("setYsTgBgPingjkyqd", (data) => {
            if (data && data.length > 0) {
                data.forEach((item, index) => {
                    this.form.baDetailVos[index].jiancjg = item.value
                })
            }
        });
    },
    beforeDestroy() {
        // 停止监听事件
        Bus.$off("setYsJcBgZhuyyqsbmcjbh");
        Bus.$off("setYsJcBgJiancyj");
        Bus.$off("setYsBgBase");
        Bus.$off("setYsTgBgPingjkyqd");
    },
    methods: {
        init() {
            this.show = false;
            if (!this.excelId) {
                const {jiancdwmc, gongcmc} = this.$store.state.dept.deptInfo;
                this.form.jiancdwmc = jiancdwmc;
                this.form.gongcmc = gongcmc;
                this.form.jiancjl = "检测结论：";
                this.form.fujsm = "附加声明：";
                return;
            }
            getYsDzkyqdsybgBsInfo(this.excelId).then((response) => {
                this.form = response.data;
                this.setInitialValue();
                this.show = true;
            });
        },
        // 设置初始值
        setInitialValue() {
            if (this.form) {
                this.form.baobmc = this.form.baobmc || "岩石单轴抗压强度试验检测报告(立方体)";
                this.form.baobbh = this.form.baobbh || "BGL003007F";
                if (!this.form.jiancjl) {
                    this.form.jiancjl = "检测结论：";
                }
                if (!this.form.fujsm) {
                    this.form.fujsm = "附加声明：";
                }
                if (!this.form.baDetailVos || this.form.baDetailVos.length <= 0) {
                    this.setDetailList();
                }
            }
        },
        // 设置内容列表初始值
        setDetailList() {
            this.$set(this.form, "baDetailVos", []);
            for (let i = 0; i < 12; i++) {
                const detail = {
                    id: undefined,
                    excelId: undefined,
                    baRowNumber: i + 1,
                    qualId: '213',
                    symbolValue: undefined,
                    num1: undefined,
                    num2: undefined,
                    jiszb: undefined,
                    jiancjg: undefined,
                    jiegpd: undefined,
                };
                this.form.baDetailVos.push(detail);
            }
        },
        // 显示检测依据列表
        showBsJiancyjView() {
            this.$refs.bsJiancyjViewRef.init(this.form.jiancyjIds);
        },
        // 检测依据选择
        selectJiancyj(info) {
            this.form.jiancyj = info.label;
            this.form.jiancyjIds = info.ids;
        },
        // 显示判定依据列表
        showBsJudgeBaseView() {
            this.$refs.bsJudgeBaseViewRef.init(this.form.pandyjIds);
        },
        // 判断依据选择
        selectJudge(info) {
            if (!info || !info.label) {
                return;
            }
            if (!this.form.pandyj) {
                this.form.pandyj = info.label;
            } else {
                if (info && info.label) {
                    this.form.pandyj += "、" + info.label;
                }
            }
        },
        // 显示仪器列表
        showBsInstrumentView() {
            this.$refs.bsInstrumentViewRef.init(this.form.shebIds);
        },
        // 仪器选择
        selectInstrument(info) {
            this.form.zhuyyqsbmcjbh = info.label;
            this.form.shebIds = info.ids;
        },
        // 显示单个技术编辑
        showBsJudgeBaseEditView(key) {
            const info = this.form.baDetailVos[key];
            info.index = key;
            info.refQualId = Number(info.qualId);
            this.$refs.bsJudgeBaseEditViewRef.init(info);
        },
        // 编辑单个技术指标后赋值
        selectJudgeBaseEdit(info) {
            console.log(info)
            if (info.index != null) {
                this.form.baDetailVos[info.index] = info;
            }
            this.computeDetectionResult([info.index]);
        },
        // 计算检测结果
        computeDetectionResult(keys) {
            if (!keys || keys.length <= 0) {
                return;
            }
            const data = keys.map((key) => {
                return {
                    ...this.form.baDetailVos[key],
                    jiancjg: this.form.baDetailVos[key].jiancjg === "-" ? "" : this.form.baDetailVos[key].jiancjg
                };
            });
            computeBiQualification(data).then((res) => {
                const returnData = res.data;
                keys.forEach((key, index) => {
                    if (returnData && returnData.length > 0 && Object.keys(returnData[index]).length > 0) {
                        let data = returnData[index]
                        console.log(key)
                        console.log(data)
                        data.jiancjg = data.jiancjg ? data.jiancjg : "-";
                        this.$set(this.form.baDetailVos, key, data)
                    }

                });
            });
        },
        handleFocus(event) {
            handleFocus(event, this.page, this.form[event]);
        },
        getJcjl() {
            this.form.jiancjl = '检测结论：依据《公路工程岩石试验规程》JTG E41-2005，检测指标符合设计文件的要求，可以用于路基工程。';
        },
        // 提交表单
        submitForm() {
            return this.form;
        },
    }
}
</script>

<style scoped lang="scss">

</style>
